$(function() {
    const q = {
            //页码值
            pagenum: 1,
            // 每页展示的数据条数
            pagesize: 5,
            // 查询的条件：文章的分类，如果为空字符串，表示没有指定分类的条件
            cate_id: '',
            // 查询的条件： 文章的发布状态，如果值为空字符串，则代表没有发布状态对应的条件
            state: ''
        }
        // 封装一个函数用来获取文章列表
    function initArtList() {
        axios.get('/my/article/list', {
            params: q
        }).then(({ data: res }) => {
            console.log(res);
            if (res.code === 0) {
                //   渲染表格中的数据
                let rows = [];
                res.data.forEach(item => {
                    rows.push(`
                    <tr>
                    <td><a href="javascript:;" style="color:blue" class="show_btn" data-id="${item.id}">${item.title}</a></td>
                    <td>${item.cate_name}</td>
                    <td>${dayjs(item.pub_date).format('YYYY-MM-DD HH:mm:ss')}</td>
                    <td>${item.state}</td>
                    <td>
                        <button type="button" class="layui-btn layui-btn-xs btn-edit">编辑</button>
                        <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-delete" data-id="${item.id}">删除</button>
                    </td>
                </tr>
                    `)
                });
                $('tbody').html(rows)
                    // 调用readerPage函数，渲染分页效果
                readerPage(res.total)
            }
        })
    }
    initArtList();

    // 封装获取文章分类的函数
    function initCateList() {
        axios.get('/my/cate/list').then(({ data: res }) => {
            if (res.code === 0) {
                let rows = [];
                res.data.forEach(function(item) {
                    rows.push(`
                    <option value="${item.id}">${item.cate_name}</option>
                                 `)
                })
                $('[name="cate_id"]').append(rows)
                layui.form.render('select')
            }
        })
    }
    initCateList();


    // 为筛选区域的表单做筛选事件
    $('form').on('submit', function(e) {
        e.preventDefault();
        //根据用户指定的筛选条件，重新请求第一页的数据
        // 1.把用户勾选的分类的id，存储到q.cate_id中
        // 2.把用户勾选的发布状态，存储到q.state中
        // 3. 把页码值重置为1
        // 4.重新向服务器发起请求
        q.cate_id = $('[name="cate_id"]').val();
        q.state = $('[name="state"]').val();
        q.pagenum = 1
        initArtList();
    })

    // 为“重置按钮”绑定点击事件
    $('[type="reset"]').on('click', function() {
        q.cate_id = '';
        q.state = '';
        q.pagenum = 1
        initArtList();
    })



    // 渲染分页函数
    function readerPage(total) {
        //执行一个laypage实例
        layui.laypage.render({
            elem: 'page-box', //注意，这里的 test1 是 ID，不用加 # 号

            count: total, //数据总数，从服务端得到
            limit: q.pagesize, //每页展示多少条数据
            // 指定哪个页码值被高亮
            curr: q.pagenum,
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
            limits: [2, 5, 10, 15, 20],
            jump: function(obj, first) {
                //obj包含了当前分页的所有参数，比如：
                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                q.pagenum = obj.curr
                console.log(obj.limit); //得到每页显示的条数
                q.pagesize = obj.limit
                    //首次不执行
                if (!first) {
                    //do something
                    initArtList();
                }
            }
        });
    }



    // 删除功能
    $('tbody').on('click', '.btn-delete', function() {
        let id = $(this).attr('data-id')
        layer.confirm('确定要删除吗?', { icon: 3, title: '提示' }, function(index) {
            //do something
            // 发送删除数据的请求
            axios.delete('/my/article/info', {
                params: {
                    id
                }
            }).then(({ data: res }) => {
                if (res.code === 0) {
                    // 删除成功的弹窗
                    layer.msg(res.message)
                        // 优化删除的功能，防止出现空白页的功能
                    if (q.pagenum > 1 && $('tbody tr').length == 1) {
                        q.pagenum--
                    }
                    initArtList();
                }
            })
            layer.close(index);
        });
    })


    // 为标题的a链接绑定事件
    $('tbody').on('click', '.show_btn', function() {
        let id = $(this).attr('data-id')
        axios.get('/my/article/info', {
            params: {
                id
            }
        }).then(({ data: res }) => {
            if (res.code === 0) {
                console.log(res.data);


                // 弹层
                layer.open({
                    type: 1,
                    area: ['85%', '85%'],
                    title: '预览文章',
                    content: `<div class="artinfo-box">
                    <h1 class="artinfo-title">文章标题</h1>
                    <div class="artinfo-bar">
                      <span>作者：${res.data.username||res.data.nickname}</span>
                      <span>发布时间：${dayjs(res.data.pub_date).format('YYYY-MM-DD HH:mm:ss') }</span>
                      <span>所属分类：${res.data.cate_name}</span>
                      <span>状态：${res.data.state}</span>
                    </div>
                    <hr>
                    <img src="http://www.liulongbin.top:3008${res.data.cover_img}">
                    <div>${res.data.content}</div>
                    </div>`
                });

            }
        })
    })

})